<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>现代前端开发模板 - 响应式设计实践</title>
    <!-- 自定义网站标签 -->
    <meta name="SiteName" content="前端开发最佳实践" />
    <meta name="SiteDomain" content="frontend-best-practices.org" />
    <meta name="SiteIDCode" content="WEB-2023-001" />
    <!-- 自定义栏目标签 -->
    <meta name="ColumnName" content="前端开发" />
    <meta name="ColumnDescription" content="探索现代Web开发技术与最佳实践" />
    <meta name="ColumnKeywords" content="HTML, CSS, JavaScript, 响应式设计" />
    <meta name="ColumnType" content="技术专栏" />
    <!-- 自定义页面标签 -->
    <meta name="ArticleTitle" content="响应式设计与暗黑模式实现" />
    <meta name="PubDate" content="2023-08-01 10:30" />
    <meta name="ContentSource" content="Web技术团队" />
    <meta name="Keywords" content="编码规范, 响应式设计, 暗黑模式" />
    <meta name="Author" content="张前端" />
    <meta name="Description" content="现代HTML/CSS开发最佳实践与团队编码规范指南" />
    <meta name="Image" content="https://example.com/featured-image.jpg" />
    <meta name="Url" content="https://example.com/frontend-best-practices" />

    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./mobile.css" media="(max-width:768px)">
    <script src="./index.js" defer></script>
</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="header" role="banner">
        <div class="container">
            <div class="header__inner">
                <a href="#" class="logo">
                    <span class="logo__text">前端实践</span>
                </a>
                
                <nav class="nav" aria-label="主菜单">
                    <ul class="nav__list">
                        <li class="nav__item"><a href="#" class="nav__link nav__link--active">首页</a></li>
                        <li class="nav__item"><a href="#" class="nav__link">教程</a></li>
                        <li class="nav__item"><a href="#" class="nav__link">资源</a></li>
                        <li class="nav__item"><a href="#" class="nav__link">案例</a></li>
                        <li class="nav__item"><a href="#" class="nav__link">关于</a></li>
                    </ul>
                </nav>
                
                <div class="header__actions">
                    <button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
                        <span class="theme-toggle__icon">
                            <span class="sun-icon"></span>
                            <span class="moon-icon"></span>
                        </span>
                    </button>
                    <button class="mobile-menu-toggle" aria-label="打开菜单" aria-expanded="false">
                        <span class="mobile-menu-toggle__line"></span>
                        <span class="mobile-menu-toggle__line"></span>
                        <span class="mobile-menu-toggle__line"></span>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="main" role="main">
        <!-- 英雄区域 -->
        <section class="hero">
            <div class="container">
                <div class="hero__content">
                    <h1 class="hero__title">响应式设计与暗黑模式实现</h1>
                    <p class="hero__subtitle">探索现代前端开发最佳实践与编码规范</p>
                    <div class="hero__actions">
                        <a href="#features" class="btn btn--primary">了解更多</a>
                        <a href="#examples" class="btn btn--secondary">查看示例</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 特性介绍 -->
        <section id="features" class="section features">
            <div class="container">
                <header class="section__header">
                    <h2 class="section__title">核心特性</h2>
                    <p class="section__subtitle">符合现代前端开发标准的最佳实践</p>
                </header>
                
                <div class="features__grid">
                    <article class="feature">
                        <div class="feature__icon">
                            <div class="icon-box">
                                <div class="icon-box__inner"></div>
                            </div>
                        </div>
                        <h3 class="feature__title">语义化HTML</h3>
                        <p class="feature__description">使用正确的HTML元素增强可访问性和SEO，确保代码结构清晰，易于维护。</p>
                    </article>
                    
                    <article class="feature">
                        <div class="feature__icon">
                            <div class="icon-box">
                                <div class="icon-box__inner"></div>
                            </div>
                        </div>
                        <h3 class="feature__title">模块化CSS</h3>
                        <p class="feature__description">采用BEM命名规范，CSS变量化设计系统，提高样式复用性和可维护性。</p>
                    </article>
                    
                    <article class="feature">
                        <div class="feature__icon">
                            <div class="icon-box">
                                <div class="icon-box__inner"></div>
                            </div>
                        </div>
                        <h3 class="feature__title">响应式设计</h3>
                        <p class="feature__description">移动优先原则，自适应各种屏幕尺寸，提供一致的用户体验。</p>
                    </article>
                    
                    <article class="feature">
                        <div class="feature__icon">
                            <div class="icon-box">
                                <div class="icon-box__inner"></div>
                            </div>
                        </div>
                        <h3 class="feature__title">暗黑模式</h3>
                        <p class="feature__description">支持系统级暗黑模式检测和手动切换，提供更舒适的用户体验。</p>
                    </article>
                </div>
            </div>
        </section>

        <!-- 代码示例 -->
        <section id="examples" class="section code-examples">
            <div class="container">
                <header class="section__header">
                    <h2 class="section__title">代码示例</h2>
                    <p class="section__subtitle">符合团队规范的HTML/CSS实现</p>
                </header>
                
                <div class="tabs">
                    <div class="tabs__nav">
                        <button class="tabs__btn tabs__btn--active" data-tab="html">HTML结构</button>
                        <button class="tabs__btn" data-tab="css">CSS样式</button>
                        <button class="tabs__btn" data-tab="js">JavaScript</button>
                    </div>
                    
                    <div class="tabs__content">
                        <div class="tabs__pane tabs__pane--active" id="html-tab">
                            <pre><code class="code-block">&lt;header class="header" role="banner"&gt;
  &lt;div class="container"&gt;
    &lt;div class="header__inner"&gt;
      &lt;a href="#" class="logo"&gt;
        &lt;span class="logo__text"&gt;前端实践&lt;/span&gt;
      &lt;/a&gt;
      
      &lt;nav class="nav" aria-label="主菜单"&gt;
        &lt;ul class="nav__list"&gt;
          &lt;li class="nav__item"&gt;
            &lt;a href="#" class="nav__link nav__link--active"&gt;首页&lt;/a&gt;
          &lt;/li&gt;
          &lt;!-- 其他导航项 --&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/header&gt;</code></pre>
                        </div>
                        
                        <div class="tabs__pane" id="css-tab">
                            <pre><code class="code-block">/* 变量定义 */
:root {
  --color-primary: #2563eb;
  --color-text: #1e293b;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
}

/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e2e8f0;
    --color-bg: #0f172a;
    --color-surface: #1e293b;
  }
}

/* 头部样式 */
.header {
  background-color: var(--color-surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 导航样式 */
.nav__list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav__link {
  color: var(--color-text);
  text-decoration: none;
}</code></pre>
                        </div>
                        
                        <div class="tabs__pane" id="js-tab">
                            <pre><code class="code-block">// 暗黑模式切换
const themeToggle = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

// 初始化主题
function initTheme() {
  const savedTheme = localStorage.getItem('theme');
  const systemPrefersDark = prefersDarkScheme.matches;
  
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else if (systemPrefersDark) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
}

// 事件监听
themeToggle.addEventListener('click', toggleTheme);

// 初始化
initTheme();</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 服务网格 -->
        <section class="section services">
            <div class="container">
                <header class="section__header">
                    <h2 class="section__title">服务网格</h2>
                    <p class="section__subtitle">模块化设计实现灵活布局</p>
                </header>
                
                <div class="services__grid">
                    <div class="service-card">
                        <div class="service-card__icon">
                            <div class="icon-circle">
                                <div class="icon-circle__inner"></div>
                            </div>
                        </div>
                        <h3 class="service-card__title">响应式布局</h3>
                        <p class="service-card__description">自适应各种屏幕尺寸，提供一致的用户体验</p>
                    </div>
                    
                    <div class="service-card">
                        <div class="service-card__icon">
                            <div class="icon-circle">
                                <div class="icon-circle__inner"></div>
                            </div>
                        </div>
                        <h3 class="service-card__title">暗黑模式</h3>
                        <p class="service-card__description">支持系统级检测和手动切换，保护视力</p>
                    </div>
                    
                    <div class="service-card">
                        <div class="service-card__icon">
                            <div class="icon-circle">
                                <div class="icon-circle__inner"></div>
                            </div>
                        </div>
                        <h3 class="service-card__title">性能优化</h3>
                        <p class="service-card__description">精简代码，减少HTTP请求，优化资源加载</p>
                    </div>
                    
                    <div class="service-card">
                        <div class="service-card__icon">
                            <div class="icon-circle">
                                <div class="icon-circle__inner"></div>
                            </div>
                        </div>
                        <h3 class="service-card__title">可访问性</h3>
                        <p class="service-card__description">遵循WAI-ARIA规范，增强无障碍体验</p>
                    </div>
                    
                    <div class="service-card">
                        <div class="service-card__icon">
                            <div class="icon-circle">
                                <div class="icon-circle__inner"></div>
                            </div>
                        </div>
                        <h3 class="service-card__title">模块化设计</h3>
                        <p class="service-card__description">组件化架构，便于复用和维护</p>
                    </div>
                    
                    <div class="service-card">
                        <div class="service-card__icon">
                            <div class="icon-circle">
                                <div class="icon-circle__inner"></div>
                            </div>
                        </div>
                        <h3 class="service-card__title">标准规范</h3>
                        <p class="service-card__description">遵循W3C标准和团队编码规范</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚区域 -->
    <footer class="footer" role="contentinfo">
        <div class="container">
            <div class="footer__grid">
                <div class="footer__info">
                    <div class="footer-logo">
                        <span class="footer-logo__text">前端实践</span>
                    </div>
                    <p class="footer__description">探索现代Web开发技术与最佳实践，创建高性能、可访问性强的用户体验。</p>
                </div>
                
                <div class="footer__links">
                    <h3 class="footer__title">快速链接</h3>
                    <ul class="footer__list">
                        <li class="footer__item"><a href="#" class="footer__link">首页</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">教程资源</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">开发案例</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">关于我们</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">联系方式</a></li>
                    </ul>
                </div>
                
                <div class="footer__contact">
                    <h3 class="footer__title">联系我们</h3>
                    <ul class="footer__list">
                        <li class="footer__item">邮箱：contact@example.com</li>
                        <li class="footer__item">电话：(123) 456-7890</li>
                        <li class="footer__item">地址：科技园区创新大厦</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer__bottom">
                <p class="footer__copyright">© 2023 前端开发最佳实践 | 保留所有权利</p>
                <div class="footer__legal">
                    <a href="#" class="footer__legal-link">隐私政策</a>
                    <a href="#" class="footer__legal-link">使用条款</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>